<template>
  <section>
    <canvas ref="cav"/>
  </section>
</template>

<script>
import {getRandomColor} from "../../../utils/tools";

export default {
  name: "canvas-word",
  data() {
    return {}
  },
  mounted() {
    this.init()

  },
  methods: {
    init() {
      let ballCanvas = this.$refs.cav
      ballCanvas.height = window.innerHeight
      ballCanvas.width = window.innerWidth - 240
      //存画布宽高
      let ww = window.innerWidth
      let wh = window.innerHeight
      let ctx = ballCanvas.getContext('2d')
      let mouse = {x: 0, y: 0}
      let radius = 1;

      //   定义粒子类
      class Particles {
        constructor(x, y) {
          //粒子位置
          this.x = Math.random() * ww;
          this.y = Math.random() * wh;
          //文字位置
          this.dest = {x, y}
          //半径取随机的
          this.r = Math.random() * 5 + 2;
          //速度
          this.vx = (Math.random() - 0.5) * 20;
          this.vy = (Math.random() - 0.5) * 20;
          //加速度
          this.accX = 0;
          this.accY = 0;
          //摩擦力
          this.friction = Math.random() * 0.05 + 0.94;
          //颜色
          this.color = getRandomColor()
        };

        //粒子运动
        move(mouse) {
          //加速度= （文字位置 - 粒子位置）/ 10000
          this.accX = (this.dest.x - this.x) / 500;
          this.accY = (this.dest.y - this.y) / 500;
          //粒子运动速度+=加速度 * 摩檫力
          this.vx += this.accX;
          this.vy += this.accY;
          this.vx *= this.friction;
          this.vy *= this.friction;
          //粒子位置的改变 运动的关键
          this.x += this.vx;
          this.y += this.vy;

          //小球和鼠标点击的位置距离
          var a = this.x - mouse.x;
          var b = this.y - mouse.y;

          var distance = Math.sqrt(a * a + b * b);
          if (distance < (radius * 70)) {
            this.accX = (this.x - mouse.x) / 100;
            this.accY = (this.y - mouse.y) / 100;
            this.vx += this.accX;
            this.vy += this.accY;
          }
        }

        //画粒子
        draw() {
          //粒子 一个实心圆
          ctx.fillStyle = this.color;
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
          ctx.fill();

        }
      }

      let heartPath = new Path2D()
      //三次贝塞尔曲线 爱心
      heartPath.moveTo(400, 160)//起点
      heartPath.bezierCurveTo(
          500, 80,
          600, 200,
          400, 350)
      heartPath.moveTo(400, 160)//起点
      heartPath.bezierCurveTo(
          300, 90,
          200, 200,
          400, 350)

      ctx.fillStyle = 'red'
      ctx.fill(heartPath)
      // 画文字 位置在中间
      ctx.font = "bold " + (ww / 8) + "px sans-serif";
      ctx.textAlign = "center";
      ctx.fillStyle = 'red'
      ctx.fillText('Hello MG', ww / 2, wh / 2 + 120)
      ctx.font = "bold " + (ww / 14) + "px sans-serif";
      ctx.fillText('2022-11-28', ww / 2, wh / 2 + 300)
      ctx.fill()

      //    获取整个画布像素信息
      let data = ctx.getImageData(0, 0, ww, wh).data
      // console.log(data)
      //多个粒子集合
      let particlesList = [];
      let index = 0
      //    找到像素点大于0的位置
      for (let i = 0; i < ww; i += Math.round(ww / 150)) {
        for (let j = 0; j < wh; j += Math.round(wh / 150)) {
          index = (i + j * ww) * 4
          //    如果 rgba(0,0,0,255)
          if (data[index] > 0) {
            particlesList.push(new Particles(i, j))
          }
        }
      }

      function onMouseClick() {
        radius++;
        if (radius === 5) {
          radius = 0;
        }
      }

      function onMouseMove(e) {
        mouse.x = e.offsetX;
        mouse.y = e.offsetY;
      }

      function onTouchMove(e) {
        if (e.touches.length > 0) {
          mouse.x = e.touches[0].offsetX;
          mouse.y = e.touches[0].offsetY;
        }
      }

      function onTouchEnd(e) {
        mouse.x = -9999;
        mouse.y = -9999;
      }

      function render(a) {
        ctx.clearRect(0, 0, ww, wh)
        requestAnimationFrame(render);
        particlesList.forEach(e => {
          e.draw();
          e.move(mouse);
        })
      }

      window.addEventListener("mousemove", onMouseMove);
      window.addEventListener("touchmove", onTouchMove);
      window.addEventListener("click", onMouseClick);
      window.addEventListener("touchend", onTouchEnd);

      requestAnimationFrame(render);


    }

  }
}
</script>

<style lang="scss" scoped>
body {
  margin: 0;
  overflow: hidden;
  font-size: 0;
}

canvas {
  background: #000000;
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;
}
</style>
